<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>DWell CMS</title>

    <link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <link rel="stylesheet" href="static/css/contentbody.css">
    <link rel="stylesheet" href="static/css/dashboard.css">
    <link rel="stylesheet" href="static/icomoon/style.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">

    <!--<link rel="stylesheet" href="static/plugins/dataTables/css/jquery.dataTables.min.css">-->
    <!--<link rel="stylesheet" href="static/plugins/dataTables/css/dataTables.foundation.min.css">-->
    <!-- 可选的Bootstrap主题文件（一般不用引入）
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">
        .slideTwo {
            width: 80px;
            height: 30px;
            background: #333;
            margin: 20px auto;
            position: relative;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            -ms-border-radius: 50px;
            -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
        }
        .slideTwo input[type=checkbox] {
            visibility: hidden;
        }
        .slideTwo:after {
            content: '';
            width: 52px;
            height: 2px;
            position: absolute;
            top: 13px;
            left: 14px;
            background: #111;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            -ms-border-radius: 50px;
            -o-border-radius: 50px;
            -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            -ms-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            -o-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
        }
        .slideTwo input[type=checkbox]:checked + label {
            left: 54px;
        }
        .slideTwo input[type=checkbox]:checked + label:after {
            background: #00bf00;
        }
        .slideTwo label:after {
            content: '';
            width: 10px;
            height: 10px;
            position: absolute;
            top: 6px;
            left: 6px;
            background: #333;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            -ms-border-radius: 50px;
            -o-border-radius: 50px;
            -webkit-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
            -moz-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
            box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
            -ms-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
            -o-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
        }
        .slideTwo label {
            display: block;
            width: 22px;
            height: 22px;
            cursor: pointer;
            position: absolute;
            top: 4px;
            z-index: 1;
            left: 4px;
            background: #fcfff4;
            background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            -ms-border-radius: 50px;
            -moz-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        }


        .slideTree {
            width: 80px;
            height: 26px;
            background: #333;
            margin: 20px auto;
            position: relative;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            -ms-border-radius: 50px;
            -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
            box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
        }
        .slideTree:before {
            content: 'ON';
            color: #00bf00;
            position: absolute;
            left: 10px;
            z-index: 0;
            font: 12px/26px Arial, sans-serif;
            font-weight: bold;
        }
        .slideTree:after {
            content: 'OFF';
            color: #000;
            position: absolute;
            right: 10px;
            z-index: 0;
            font: 12px/26px Arial, sans-serif;
            font-weight: bold;
            text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
        }
        .slideTree input[type=checkbox] {
            visibility: hidden;
        }
        .slideTree input[type=checkbox]:checked + label {
            left: 43px;
        }
        .slideTree label {
            display: block;
            width: 34px;
            height: 20px;
            cursor: pointer;
            position: absolute;
            top: 3px;
            left: 3px;
            z-index: 1;
            background: #fcfff4;
            background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            border-radius: 50px;
            -ms-border-radius: 50px;
            -moz-transition: all 0.4s ease;
            -o-transition: all 0.4s ease;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
            -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        }



    </style>
</head>
<body class="dashboard fixed skin-blue">
    <div class="wrapper">
        <header class="main-header">
            <a href="" class="logo">
                <span class="logo-lg">
                    <b>Admin</b>LTE
                </span>
            </a>
            <nav class="navbar navbar-static-top" role="navigation">
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                </a>
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">4</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You Have 4 Messages</li>
                                <li>

                                </li>
                            </ul>
                        </li>
                        <li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">10</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 10 notifications</li>
                                <li>

                                </li>
                                <li class="footer"></li>
                            </ul>
                        </li>
                        <li class="dropdown tasks-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 9 tasks</li>
                                <li>

                                </li>
                                <li class="footer"></li>
                            </ul>
                        </li>
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="static/img/avatar.png" class="user-image" alt="User Image"/>
                                <span class="hidden-xs">Jange Gu</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="user-header">header</li>
                                <li class="user-body">
                                    user body
                                </li>
                                <li class="user-footer"></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
    </div><!--  头部布局完毕  -->

    <div class="bottom">
        <div class="body-sidebar">
            <div class="sidebar-content">
                <div class="sidebar-inner">
                    <div class="sidebar-fold"></div>
                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">产品与服务</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-newspaper"></span>
                                    </div>
                                    <span class="menu-item-title">对象存储OSS</span>
                                </a>
                            </li><!--nav-menu-item每个子菜单-->
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-newspaper"></span>
                                    </div>
                                    <span class="menu-item-title">域名</span>
                                </a>
                            </li>
                        </ul>
                    </div><!--sidebar-nav菜单分类Accordion-->

                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">系统管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">用户管理</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">角色管理</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">资源管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">菜品管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">菜品类别</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">菜品上传</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">菜品列表</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">点菜备注</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">退菜备注</span>
                                </a>
                            </li>
                        </ul>
                    </div>


                    <div class="sidebar-nav">
                        <div class="nav-menu-title sub-menus-toggle">
                            <div class="nav-menu-title-inner">
                                <span class="nav-menu-title-text">订单管理</span>
                                <span class="nav-menu-manage"></span>
                                <span class="toggle-icon fa fa-angle-down nav-menu-title-icon"></span>
                            </div>
                        </div>
                        <ul class="nav-sub-menus">
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-blog"></span>
                                    </div>
                                    <span class="menu-item-title">订单记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-camera"></span>
                                    </div>
                                    <span class="menu-item-title">挂账记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">清账记录</span>
                                </a>
                            </li>
                            <li class="nav-menu-item">
                                <a href="#">
                                    <div class="nav-menu-item-icon">
                                        <span class="icon-oss icon-music"></span>
                                    </div>
                                    <span class="menu-item-title">评价管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="sidebar-nav">
                        <div style="padding: 3px;"></div>
                        <div style="color: #FFFFFF; padding: 4px; font-size: 12px;">Copyright @ DWell Smartfd Ver 1.0.0</div>
                        <div style="padding: 10px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="body-content">
            <div class="content-navbar">

            </div>
            <div class="content-main">
                <div class="container content-container">
                    <div class="row">
                        <div class="content-section-notice">

                        </div>
                        <div class="col-sm-12">
                            <div class="col-md-8 jo-section">
                                <div class="jo-section-inner section-user">
                                   <div class="slideTree">
                                       <input type="checkbox" value="None" id="slideThree" name="check" checked>
                                       <label for="slideThree"></label>
                                   </div>
                                </div>
                            </div>
                            <div class="col-md-4 jo-section">
                                <div class="jo-section-inner section-user">
                                    <div class="slideTwo">
                                        <input type="checkbox" value="None" id="slideTwo" name="check" checked>
                                        <label for="slideTwo"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 jo-section">
                                <div class="jo-section-inner section-user">
                                    asjdjasjdakd
                                </div>
                            </div>
                            <div class="col-md-6 jo-section">
                                <div class="jo-section-inner section-user">
                                    asjdjasjdakd
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>-->
<script src="static/js/jquery-2.1.0.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<!--<script src="static/plugins/dataTables/js/jquery.dataTables.min.js"></script>-->
<!--<script src="static/plugins/dataTables/js/dataTables.foundation.min.js"></script>-->
<script type="text/javascript">
    var table;
    $(function(){
        /**
         * 可以通过设置高度，用animate的方式，更加平滑的切换查看效果
         */
        $('.sidebar-nav .sub-menus-toggle').click( function(e){
            e.preventDefault();
            $li = $(this).parent('.sidebar-nav');
            if( !$li.hasClass('nav-fold')){
                console.log($li.find("span.toggle-icon"));
                $li.find(".toggle-icon").removeClass('fa-angle-down').addClass('fa-angle-left');
                $li.addClass('nav-fold');
            }
            else {
                $li.find("span.toggle-icon").removeClass('fa-angle-left').addClass('fa-angle-down');
                $li.removeClass('nav-fold');
            }
            $li.find(' > .nav-sub-menus').toggle();
        });

    });
</script>
</body>
</html>
